<template>
    <div class="profile">
        <header>
            profile|
            <router-link to="/">首页</router-link>
        </header>

        <body>
            <div class="person">
                <div class="name">
                    <h1>HMS</h1>
                    <h3>Web Developer</h3>
                </div>
                <div class="tel">
                    <div>
                        <i class="icon-box">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-tel01"></use>
                            </svg>
                        </i>
                        <p>13071298762</p>
                    </div>
                    <div>
                        <i class="icon-box">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-youxiang"></use>
                            </svg>
                        </i>
                        <p>934454783@qq.com</p>
                    </div>
                    <div>
                        <i class="icon-box">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-dizhi"></use>
                            </svg>
                        </i>
                        <p>WUHAN|china</p>
                    </div>
                    <div>
                        <i class="icon-box">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-web"></use>
                            </svg>
                        </i>
                        <p>
                            <a href="http://humaoshu.gitee.io/coding-principle"
                                >http://humaoshu.gitee.io/</a
                            >
                        </p>
                    </div>
                </div>
            </div>
            <hr />
            <div class="me">
                <div class="avatar">
                    <a-avatar
                        :size="100"
                        src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1573110285&di=3c7befea33b721762f8f91813899ff01&src=http://gss0.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/1e30e924b899a901552a94eb17950a7b0308f5d4.jpg"
                    ></a-avatar>
                </div>
                <div>
                    “渔夫桑提亚哥在海上捕鱼 前84天一无所获 ,第85天
                    他冒险去从未去过的深海打鱼。他发现一条大马林鱼
                    耗时3天刺死了它, 回归途中遭到鲨鱼五次袭击,
                    他用鱼叉、船桨和刀子反击 历尽千辛万苦, 终于回到港口,
                    但巴林鱼仅剩下五幅巨大的白骨架。” <br />
                    <br />
                </div>
            </div>
            <hr />
            <div class="work">
                <div class="left">
                    <h3>work</h3>
                    <a-card title="前端开发">
                        <a href="#" slot="extra">More</a>
                        “渔夫桑提亚哥在海上捕鱼 前84天一无所获 ,第85天
                        他冒险去从未去过的深海打鱼。他发现一条大马林鱼
                        耗时3天刺死了它, 回归途中遭到鲨鱼五次袭击,
                        他用鱼叉、船桨和刀子反击 历尽千辛万苦, 终于回到港口,
                        但巴林鱼仅剩下五幅巨大的白骨架。” <br />
                        <br />
                        <a-card-meta description="2019.6-2020.6"></a-card-meta>
                    </a-card>
                    <a-card title="前端开发">
                        <a href="#" slot="extra">More</a>
                        “渔夫桑提亚哥在海上捕鱼 前84天一无所获 ,第85天
                        他冒险去从未去过的深海打鱼。他发现一条大马林鱼
                        耗时3天刺死了它, 回归途中遭到鲨鱼五次袭击,
                        他用鱼叉、船桨和刀子反击 历尽千辛万苦, 终于回到港口,
                        但巴林鱼仅剩下五幅巨大的白骨架。” <br />
                        <br />
                        <a-card-meta description="2019.6-2020.6"></a-card-meta>
                    </a-card>
                    <a-card title="前端开发">
                        <a href="#" slot="extra">More</a>
                        “渔夫桑提亚哥在海上捕鱼 前84天一无所获 ,第85天
                        他冒险去从未去过的深海打鱼。他发现一条大马林鱼
                        耗时3天刺死了它, 回归途中遭到鲨鱼五次袭击,
                        他用鱼叉、船桨和刀子反击 历尽千辛万苦, 终于回到港口,
                        但巴林鱼仅剩下五幅巨大的白骨架。” <br />
                        <br />
                        <a-card-meta description="2019.6-2020.6"></a-card-meta>
                    </a-card>
                    <h3>work</h3>
                    <a-card title="前端开发">
                        <a href="#" slot="extra">More</a>
                        “渔夫桑提亚哥在海上捕鱼 前84天一无所获 ,第85天
                        他冒险去从未去过的深海打鱼。他发现一条大马林鱼
                        耗时3天刺死了它, 回归途中遭到鲨鱼五次袭击,
                        他用鱼叉、船桨和刀子反击 历尽千辛万苦, 终于回到港口,
                        但巴林鱼仅剩下五幅巨大的白骨架。”
                        <br />
                        <br />
                        <a-card-meta description="2019.6-2020.6"></a-card-meta>
                    </a-card>
                </div>
                <div class="right">
                    <h3>技能</h3>
                    <ul>
                        <li>JavaScript</li>
                        <li>typescript</li>
                        <li>Java</li>
                    </ul>
                    <h3>技能</h3>
                    <ul>
                        <li>JavaScript</li>
                        <li>typescript</li>
                        <li>Java</li>
                    </ul>
                    <h3>技能</h3>
                    <ul>
                        <li>JavaScript</li>
                        <li>typescript</li>
                        <li>Java</li>
                    </ul>
                </div>
            </div>
            <hr />
            <footer>
                <div>
                    <i class="icon-box">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-npm"></use>
                        </svg>
                    </i>
                    <a href=" https://www.npmjs.com/settings/hms-0908/packages"
                        >npm地址</a
                    >
                </div>
                <div>
                    <i class="icon-box">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-GitHub"></use>
                        </svg>
                    </i>
                    <a href=" https://gitee.com/humaoshu/Coding-Principle"
                        >gitee地址</a
                    >
                </div>
                <div>
                    <i class="icon-box">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-csdn"></use>
                        </svg>
                    </i>
                    <a href=" https://gitee.com/humaoshu/Coding-Principle"
                        >CSDN</a
                    >
                </div>
            </footer>
        </body>

        <footer>@santiago</footer>
    </div>
</template>
<style lang='less' scoped>
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.icon-box {
    font-size: 16px;
    line-height: 40px;
    margin: 0;
    display: inline-block;
    font-style: normal;
    vertical-align: -0.125em;
    text-align: center;
    text-transform: none;
}
.router-link-active {
    color: #2c3e50;
}
.profile {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    header {
        background-color: #54b689 !important;
        height: 6vh;
        width: 100%;
        font-size: 1.2rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    body {
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;

        width: 80vw;
        margin: 60px;
        padding: 48px;
        .person {
            display: flex;
            flex-direction: row;

            .name {
                width: 66%;
                height: 14vh;
                text-align: left;
                h1 {
                    color: #54b689;
                    font-size: 2.75rem;
                }
                h3 {
                    font-size: 1.25rem;
                    color: gray;
                }
            }
            .tel {
                width: 35%;
                height: 10vh;
                text-align: left;
                border-left: rgb(233, 233, 233) 1px solid;
                div {
                    height: 20px;
                    margin: 10px;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    p {
                        display: block;
                        margin-left: 5px;
                        margin-top: 12px;
                    }
                }
            }
        }
        hr {
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            margin-top: 1rem;
            margin-bottom: 1rem;
        }
        .me {
            height: 15vh;
            display: flex;
            flex-direction: row;
            align-items: center;
            .avatar {
                margin-right: 40px;
            }
            div {
                text-align: left;
            }
        }
        .work {
            display: flex;
            flex-direction: row;
            text-align: left;

            .left {
                width: 65%;
                h3 {
                    color: #54b689;
                    position: relative;
                    padding-left: 1rem;
                    font-size: 1.125rem;
                    letter-spacing: 0.15rem;
                    color: #54b689;
                }
                h3:before {
                    content: '';
                    display: inline-block;
                    width: 5px;
                    height: 100%;
                    background: #54b689;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }
            .right {
                width: 35%;
                text-align: left;
                border-left: rgb(233, 233, 233) 1px solid;
                h3 {
                    margin-left: 30px;
                    color: #54b689;
                    position: relative;
                    padding-left: 1rem;
                    font-size: 1.125rem;
                    letter-spacing: 0.15rem;
                    color: #54b689;
                }
                h3:before {
                    content: '';
                    display: inline-block;
                    width: 5px;
                    height: 100%;
                    background: #54b689;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }
        }
        footer {
            display: flex;
            flex-direction: row;
            justify-content: center;
            div {
                margin-left: 40px;

                .icon {
                    width: 1em;
                    height: 1em;
                    vertical-align: -0.15em;
                    fill: currentColor;
                    overflow: hidden;
                }

                .icon-box {
                    font-size: 16px;
                    line-height: 40px;
                    margin: 0;
                    display: inline-block;
                    font-style: normal;
                    vertical-align: -0.125em;
                    text-align: center;
                    text-transform: none;
                }
                a {
                    margin-top: 12px;
                    margin-left: 10px;
                }
            }
        }
    }
}
</style>
